<script setup lang="ts">
const adLoaded = ref(true)
const adContainer = ref<HTMLElement>()

const isProduction = import.meta.env.MODE === 'production'

onMounted(() => {
  try {
    ;(window.adsbygoogle = window.adsbygoogle || []).push({})
  } catch (e) {
    adLoaded.value = false
  }

  // 3秒后检查广告状态
  setTimeout(() => {
    if (adContainer.value) {
      const ads = adContainer.value.querySelectorAll('.adsbygoogle')
      // 检查所有广告元素
      const hasFailedAd = Array.from(ads).some(ad => ad.clientHeight === 0)
      if (hasFailedAd) {
        adLoaded.value = false
      }
    }
  }, 3000)
})
</script>

<template>
  <div
    v-if="isProduction"
    class="relative mt-5"
    style="width: 375px; margin: 0 auto; overflow: hidden"
  >
    <h1 class="text-center text-xs text-white">Advertisement</h1>
    <div v-if="adLoaded">
      <!-- 广告内容插槽 -->
      <slot />
    </div>

    <!-- 默认备用内容 -->
    <div v-else>
      <div class="absolute top-0 left-0 rounded-2xl bg-slate-500" />
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="flex items-center justify-center">
          <span class="font-['Poppins'] text-9xl font-black text-lime-500">ADS</span>
        </div>
      </div>
    </div>
  </div>
</template>
